<template>
  <Row class="login2">
    <Col :xs="24" :sm="24" :md="24" :lg="14" :xl="16" class="left">
      <Col :xs="22" :sm="20" :md="14" :lg="14" :xl="8" class="container">
        <div class="header">
          <div class="title">登录</div>
          <div class="regist">现在还没有账号？<a>立即注册</a></div>
        </div>
        <Form
          ref="form"
          :model="form"
          :rules="rules"
          label-position="top"
          class="form"
        >
          <FormItem label="账号/邮箱/手机号" prop="username">
            <Input
              v-model="form.username"
              prefix="ios-contact"
              size="large"
              clearable
              placeholder="账号/邮箱/手机号"
              autocomplete="off"
            />
          </FormItem>
          <FormItem label="密码" prop="password">
            <Input
              type="password"
              v-model="form.password"
              prefix="ios-lock"
              size="large"
              password
              placeholder="请输入密码"
              autocomplete="off"
            />
          </FormItem>
        </Form>
        <Button
          type="primary"
          size="large"
          :loading="loading"
          @click="submitLogin"
          long
          class="btn"
        >
          登录
        </Button>
        <Divider plain>第三方账号登录</Divider>
        <div class="other-login">
          <button class="o-btn" style="margin-right: 7px">
            <img src="@/assets/icon/qq.png" />QQ登录
          </button>
          <button class="o-btn">
            <img src="@/assets/icon/weixin.png" />微信登录
          </button>
        </div>
      </Col>
    </Col>
    <Col :xs="0" :sm="0" :md="0" :lg="10" :xl="8">
      <div
        class="right"
        :style="{
          backgroundImage: 'url(' + require('@/assets/demo/bg1.jpeg') + ')',
        }"
      >
        <div class="top"><img src="@/assets/logo-white.png" /></div>
        <div class="center">
          <img src="@/assets/icon/pic2.png" />
          <div class="welcome">欢迎回到 XBoot</div>
          <div class="text">
            XBoot是一个很不错的一站式前后端分离快速开发平台
          </div>
        </div>
        <div class="bottom">
          <a>使用条款</a><span>|</span><a>隐私政策</a><span>|</span
          ><a>关于我们</a>
        </div>
      </div>
    </Col>
  </Row>
</template>

<script>
export default {
  name: "login1",
  components: {},
  data() {
    return {
      loading: false,
      form: { username: "", password: "" },
      rules: {
        username: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "change",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    submitLogin() {
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
  },
  mounted() {},
};
</script>

<style lang="less">
.login2 {
  height: 100vh;
  .left {
    display: flex;
    justify-content: center;
    align-items: center;
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 4px;
      margin: 21px 24px;
      .header {
        width: 100%;
        .title {
          font-size: 30px;
          margin-bottom: 8px;
          line-height: 1.5;
          color: rgb(26, 51, 83);
          font-weight: 500;
        }
        .regist {
          line-height: 1.8;
          margin-bottom: 46px;
        }
      }

      .form {
        width: 100%;
        .ivu-form-item-label {
          color: #455560;
          font-weight: 500;
          line-height: 1.5;
        }
      }
      .btn {
        margin: 4px 0 20px 0;
      }
      .ivu-divider-inner-text {
        color: rgba(114, 132, 154, 0.7);
      }
      .other-login {
        display: flex;
        justify-content: center;
        align-items: center;
        .o-btn {
          line-height: 1.5;
          position: relative;
          display: flex;
          align-items: center;
          font-weight: 400;
          white-space: nowrap;
          text-align: center;
          border: 1px solid rgb(230, 235, 241);
          box-shadow: rgb(0 0 0 / 2%) 0px 2px 0px;
          cursor: pointer;
          transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
          user-select: none;
          touch-action: manipulation;
          height: 40px;
          padding: 8.5px 1.25rem;
          font-size: 14px;
          border-radius: 4px;
          color: rgb(69, 85, 96);
          background: rgb(255, 255, 255);
          &:hover {
            background-color: rgb(237, 237, 237);
            border-color: rgb(237, 237, 237);
          }
          img {
            width: 14px;
            margin-right: 8px;
          }
        }
      }
    }
  }
  .right {
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    .top {
      display: flex;
      justify-content: flex-end;
      img {
        width: 150px;
        height: 50px;
        margin: 10px 0;
      }
    }
    .center {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 8%;
      img {
        margin-bottom: 48px;
        width: 100%;
      }
      .welcome {
        width: 100%;
        color: #fff;
        font-size: 30px;
        font-weight: 500;
        margin-bottom: 8px;
        line-height: 1.5;
      }
      .text {
        width: 100%;
        color: #fff;
      }
    }
    .bottom {
      display: flex;
      justify-content: flex-end;
      color: #fff;
      margin-bottom: 24px;
      a {
        color: #fff;
      }
      span {
        margin: 0 8px;
      }
    }
  }
}
</style>
